<script setup lang="ts">
// import { useFormSlot } from '../BKTable/hooks/useFormSlot'
import type { IBKSelectEmits, IBKSelectProps } from "./type";

defineOptions({
  name: "BKSelect"
});
const props = withDefaults(defineProps<IBKSelectProps>(), {
  labelKey: "label",
  valueKey: "value",
  isChangeClear: true
});
const emit = defineEmits<IBKSelectEmits>();
const selectModelValue = ref(undefined);
const attrs = useAttrs();
// const slots = useSlots()
// const { replaceFormSlotKey, getFormSlotKeys } = useFormSlot(slots)
// 当options发生变化的时候 清空掉默认的value
watch(
  () => [props.options, props.multiple],
  () => {
    let defaultValue: any = props.multiple ? [] : props.modelValue;
    // options 发生变化是否需要清空表单
    if (props.isChangeClear) {
      defaultValue = undefined;
      selectModelValue.value = defaultValue;
    }

    emit("update:modelValue", defaultValue);
    emit("clear");
  }
);
watch(
  () => props.modelValue,
  newV => {
    selectModelValue.value = newV;
    // emit('update:modelValue', newV)
    // 这里能拿到差异
    //
  }
);
function handleChange(v: any) {
  emit("update:modelValue", v);
  const diffValue = setDiffValue(v);
  emit("change", v, diffValue);
  // 如果是多选
  if (props.multiple) {
    // 取消 cancel selected
    handleCancelSelected(v, diffValue);
  }
}
// 抛出反选事件
function handleCancelSelected(checkArr: any[], diffValue: any[]) {
  // 清空的场景 就是 checkArr = [] 但是diff会是上次选中的内容
  if (checkArr.length === 0 && diffValue.length > 0) {
    emit("cancel-selected", diffValue);
    return;
  }
  const diffArr: any[] = diffValue.filter(v => {
    return checkArr.includes(v);
  });
  // 如果找不到 就代表这一次是取消
  if (diffArr.length === 0) emit("cancel-selected", diffValue);
}
// 计算差异数据
function setDiffValue(v: any) {
  let reurnValue;
  if (props.multiple && v) {
    if (typeof v !== "string" && v.length === 0) {
      reurnValue = props.modelValue;
    } else {
      const concatArr = props.modelValue ? props.modelValue : [];
      const allData: any[] = v.concat(concatArr);
      reurnValue = allData.filter((item: any) => {
        return !v.includes(item) || !concatArr.includes(item);
      });
    }
  } else {
    reurnValue = props.modelValue;
  }
  return reurnValue;
}
// 初始化数据
function init() {
  selectModelValue.value = props.modelValue;
}
init();
</script>

<template>
  <div class="BKSelect">
    <ElSelect
      v-model="selectModelValue"
      style="width: 100%"
      :multiple="multiple"
      v-bind="attrs"
      @change="handleChange"
    >
      <template #label="item">
        <slot name="select" v-bind="item" />
      </template>
      <div v-if="props.isTable" class="select_table">
        <div class="select_header" style="user-select: none">
          <div
            v-for="(item, index) in props.tableColumn"
            :key="index"
            :style="{ width: item.width ? `${item.width}px` : '100px' }"
            class=""
          >
            {{ item.label }}
          </div>
        </div>
        <div class="select_body">
          <ElOption
            v-for="item in props.options"
            v-bind="item"
            :key="item[valueKey]"
            :label="item[labelKey]"
            :value="item[valueKey]"
          >
            <div class="table_options_item">
              <div
                v-for="(v, index) in props.tableColumn"
                :key="index"
                :style="{ width: item.width ? `${item.width}px` : '100px' }"
              >
                <slot :name="v.prop" v-bind="item">
                  {{ item[v.prop] }}
                </slot>
              </div>
            </div>
          </ElOption>
        </div>
      </div>
      <div v-else>
        <ElOption
          v-for="item in props.options"
          v-bind="item"
          :key="item[valueKey]"
          :label="item[labelKey]"
          :value="item[valueKey]"
        />
      </div>
    </ElSelect>
  </div>
</template>

<style lang="scss" scoped>
.BKSelect {
  width: 100%;
  .table_options_item {
    display: flex;
  }
}
.select_table {
  width: 100%;

  .select_header {
    display: flex;
    width: 100%;

    // min-width: 300px;
    // max-width: 500px;
    height: 34px;
    padding-right: 10px;
    padding-left: 12px;
    font-size: 12px;
    line-height: 34px;
    color: #4d4e4e;
    background-color: #fff;
    border-bottom: 1px solid #e2eaee;
  }

  .select_body {
    width: 100%;

    .el-select-dropdown__item {
      padding-right: 10px;
      padding-left: 12px;
    }

    .table_options_item {
      display: flex;
    }
  }
}
</style>
